<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>包地区设置</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/packagemgr.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/icon.css">
	</head>
		<style>
			.p_c_action_type {
				background-color:#EDF2F5;
				font-family:'新宋体';
				font-size:12px;
				line-height:20px;
				font-weight:noml;
				overflow:hidden;

			}
		</style>
	<body>
		<div id="publishEditBody" class="p_c_action_type">
			<div style="margin-left:0px;">
				<div id="areaQuery"></div>
				<div id="areaSelect"></div>
			</div>
			<div style="text-align:right; margin-right:10px;">
				<input type="button" value="确定" onclick="javascript:areaConfirm();"/>
				<input type="button" value="取消" onclick="javascript:areaCancel();"/>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$("#areaSelect").datagrid({
					title:'选择结果',
					fitColumns: true,
					nowrap:false,
					showFooter:true,
					striped:true,
					height:200,
					singleSelect:true,
					columns:[[
						{field:'areaId',title:'ID',width:80,align:'left'},
						{field:'name',title:'名称',width:220,align:'left'},
						{field:'operate', title:'操作', width:80,align:'left',
							formatter:function(value,row,index){
								var s = '<input type="button" value="删除" onclick="del(' + row.areaId + ')"/>';
								return s;
							}
					}]]



				});


				var areaDisplay = $("#packageArea").val();

			    var publishAreaIds = $("#publishArea").val();

			    if(areaDisplay != null &&areaDisplay != ''){
			    	 var a =  publishAreaIds.split(',');
			    	 var d = areaDisplay.split(',');
					for(var i = 0; i < a.length; i++){
					  	$('#areaSelect').datagrid('appendRow',{
							areaId:a[i],
							name:d[i]
						});
					}
					$('#areaSelect').datagrid('acceptChanges');
				}
				var params = {};

				params.areaId3Level = packageAreaId;

				$("#areaQuery").datagrid({
					toolbar:[{
           				 text: '地区名称:<input type="text" id="areaNameSelect"/>'
        			},
        			{
        				iconCls: 'icon-search',
        				handler: function(){
               				queryArea();
            			}
        			}],
        			fitColumns: true,
					nowrap:false,
					showFooter:true,
					striped:true,
					height:200,
					url:'../json/getAreaByName.action',
					queryParams:params,
					singleSelect:true,
					columns:[[
						{field:'areaId',title:'ID',width:80,align:'left'},
						{field:'name',title:'名称',width:180,align:'left'}
					]],
					onSelect:function(index, row){
						var flag = false; //标识选中的地区在不在选择列表中
						//首选验证是否已经存在于选择列表中
						var a = $('#areaSelect').datagrid('getRows');
						for(var i = 0; i < a.length; i++){
							if(row.areaId == a[i].areaId){
								flag = true;
								$('#areaQuery').datagrid('unselectRow', index);
								$.messager.alert('提示信息','该地区已经存在于选择列表中!','info');
								break;
							}
						}
						//第一关通过之后再验证是否已经存在于之前的选择结果中
						if(!flag){
							var hasArea = $("#publishArea").val();
							if(hasArea != ''){
								var areaArray = hasArea.split(",");
								for(var i = 0; i < areaArray.length; i++){
									if(areaArray[i] == row.areaId){
										flag = true;
										$('#areaQuery').datagrid('unselectRow', index);
										$.messager.alert('提示信息','该地区已经被选择!','info');
										break;
									}
								}
							}
						}

						//完全过关之后将选中结果加入到选择列表中
						if(!flag){
							$('#areaSelect').datagrid('appendRow',{
								areaId:row.areaId,
								name:row.name,
								threeLevel:row.threeLevel
							});
							$('#areaSelect').datagrid('acceptChanges');
						}
					},
					pagination:true
				});
				var p = $('#areaQuery').datagrid('getPager');

				$(p).pagination({
					pageSize: 10,//每页显示的记录条数，默认为10
					pageList: [10,15],//可以设置每页记录条数的列表
				 	beforePageText: '第',//页数文本框前显示的汉字
				   	afterPageText: '页    共 {pages} 页',
				   	displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
				});


			});

			function queryArea(){
				var name = $("#areaNameSelect").val();

				if(name !='' || name != null  ){
					initArea(name);
				}else{
					initArea();
				}



			}

			function initArea(name){

				var params = {};

				params.areaName = encodeURIComponent(name);
				params.areaId3Level = packageAreaId;
				$('#areaQuery').datagrid({url:'../json/getAreaByName.action',
					queryParams:params});

				var p = $('#areaQuery').datagrid('getPager');

				$(p).pagination({
					pageSize: 10,//每页显示的记录条数，默认为10
					pageList: [10,15],//可以设置每页记录条数的列表
				 	beforePageText: '第',//页数文本框前显示的汉字
				   	afterPageText: '页    共 {pages} 页',
				   	displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
				});

			}

			function del(areaId){
				var a = $('#areaSelect').datagrid('getRows');
				for(var i = 0; i < a.length; i++){
					if(a[i].areaId == areaId){
						var index = $('#areaSelect').datagrid('getRowIndex', a[i]);
						$('#areaSelect').datagrid('deleteRow', index);
					}
				}
			}

			function areaConfirm(){
				//拼装地区名称展示
				var areaNames = '';
				//拼装地区Id
				var areaIds = '';
				var a = $('#areaSelect').datagrid('getRows');
				for(var i = 0; i < a.length; i++){
					areaIds += a[i].areaId;
					areaNames += a[i].name;
					if(i != (a.length-1)){
						areaIds += ',';
						areaNames += ',';
					}
				}
				//先清除
				$("#publishArea").val(null);
				 $("#packageArea").val(null);
				var areaDisplay ='';
				var publishAreaIds ='';


				if(areaDisplay == ''){
					areaDisplay = areaNames;
				}else{
					areaDisplay += ','+areaNames;
				}
				if(publishAreaIds == '' || publishAreaIds == undefined){
					publishAreaIds = areaIds;
				}else{
					publishAreaIds += ',' + areaIds;
				}
				$("#packageArea").attr('value', areaDisplay);
				$("#publishArea").attr('value', publishAreaIds);
				$("#areaEdit").window('close');
			}
			function areaCancel(){
				$("#areaEdit").window('close');
			}
		</script>
	</body>
</html>
